<template>
	<div ref="chart" style="width:80vw;height:90vh;"></div>
</template>

<script>
	import Echart from '@/common/echart';
	import dark from '../../../echarts/dark.json';
	import request from '@/utils/request';
	export default {
		components: {
			Echart
		},
		data() {
			return {
				options: {
					title: {
						text: '菜单分布情况'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						left: 'center',
						data: ['菜单分布情况']
					},
					radar: [
					        {
					            indicator: [
					                {text: '品牌', max: 100},
					                {text: '内容', max: 100},
					                {text: '可用性', max: 100},
					                {text: '功能', max: 100}
					            ],
					            center: ['50%', '40%'],
					            radius: 80
					        }
					],
					series: [
						{
							type: 'radar',
							tooltip: {
								trigger: 'item'
							},
							areaStyle: {},
							data: [
								{
									value: [60, 73, 85, 40],
									name: '菜单分布情况'
								}
							]
						}
					]
				},
			}
		},
		methods: {
			getReuestData() {
				let _this = this;
				request({
					url: '/magic-api/menu/distribution',
					method: 'post',
				}).then(response => {
					debugger
					let indicator = [];
					let indicatorData = [];
					for(let i = 0 ; i < response.data.length ; i++){
						indicator.push({
							text: response.data[i].menu_name,
							max: 100
						})
						indicatorData.push(response.data[i].count)
					}
					_this.options.radar[0].indicator = indicator;
					_this.options.series[0].data.value = response.data.lineData;
					_this.drawChart();
				})
			},
			drawChart() {
			  let echart = this.$echarts.init(this.$refs.chart,"dark");
			  echart.setOption(this.options);
			},
		},
		mounted() {
			// this.getReuestData();
			this.getReuestData();
			let darkTheme = require('../../../echarts/dark.json');
			this.$echarts.registerTheme('dark', darkTheme.theme);

		}
	}
</script>

<style>
</style>
